<template>
    <!-- 导航栏 -->
    <van-nav-bar
        :title="TypeName"
        left-text="返回"
        left-arrow
        fixed
        placeholder
        z-index="1000"
        @click-left="OnBack"
        @click-right="SearchShow = true"
    >
        <template #right>
            <van-icon name="search" size="20" />
        </template>
    </van-nav-bar>

    <!-- 下拉菜单 -->
    <van-sticky :offset-top="46">
        <van-dropdown-menu>
            <van-dropdown-item @change="OnTypeToggle" v-model="TypeActive" :options="TypeList" />
            <van-dropdown-item @change="OnFlagToggle" v-model="FlagActive" :options="FlagList" />
            <van-dropdown-item @change="OnSortToggle" v-model="SortActive" :options="SortList" />
            <van-dropdown-item @change="OnByToggle" v-model="ByActive" :options="ByList" />
        </van-dropdown-menu>
    </van-sticky>

    <!-- 搜索框 -->
    <van-popup v-model:show="SearchShow" position="top">
        <van-search v-model="keywords" placeholder="请输入关键词" @search="OnSearch" />
    </van-popup>

    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="refreshing" @refresh="OnRefresh">
        <!-- 加载列表 -->
        <van-list
            v-model:loading="loading"
            :finished="finished"
            :offset="10"
            finished-text="没有更多了"
            @load="OnLoad"
        >
            <div class="list">
                <div class="item" v-for="item in list" :key="item.id">
                    <router-link :to="{path:'/product/info',query:{proid:item.id}}">
                        <div class="thumb">
                            <van-image
                                width="100%"
                                height="150px"
                                fit="cover"
                                :src="item.thumb_text"
                            />
                        </div>
                        <div class="name">{{ item.name }}</div>
                        <div class="box">
                            <div class="price">
                                <span v-if="item.live_price > 0">￥{{ item.live_price }}</span>
                                <span :class="item.live_price ? 'product_price' : ''">￥{{ item.price }}</span>
                            </div>
                            <div class="buy-count">{{ item.buy_count }}人付款</div>
                        </div>
                        <div class="box">
                            <div class="region">{{ item.region_text }}</div>
                            <div class="chat"><van-icon name="chat-o" color="#ff5000" size="16" /></div>
                        </div>

                    </router-link>
                </div>
            </div>
        </van-list>
    </van-pull-refresh>

    <!-- 返回顶部 -->
    <van-back-top />
</template>

<script setup>
    const {proxy} = getCurrentInstance();

    const TypeList = reactive([
        {text: '全部分类', value: '0'},
    ]);

    const FlagList = [
        {text: '全部商品', value: '0'},
        {text: '新品', value: '1'},
        {text: '热销', value: '2'},
        {text: '推荐', value: '3'},
    ];

    const SortList = [
        {text: '按上架时间', value: 'createtime'},
        {text: '按价格', value: 'price'},
        {text: '按库存', value: 'stock'}
    ];

    const ByList = [
        {text: '降序', value: 'desc'},
        {text: '升序', value: 'asc'},
    ];

    const TypeActive = ref(proxy.$route.query.typeid ?? '0');
    const FlagActive = ref('0'); // 标志 1-新品 2-热销 3-推荐
    const SortActive = ref('createtime'); // 排序 上架时间 价格 库存
    const ByActive = ref('desc');  // desc 降序 asc 升序
    const SearchShow = ref(false); // 搜索框的显示
    const keywords = ref(''); // 搜索关键词
    const TypeName = ref('全部分类'); // 标题栏上面的分类名称
    
    const list = ref([]); // 数据列表
    const page = ref(1);  // 分页
    const loading = ref(false); // 加载状态
    const finished = ref(false); // 是否无更多数据
    const refreshing = ref(false); // 下拉刷新

    // 生命周期 挂载前
    onBeforeMount(() =>
    {
        GetTypeData();
    })

    // 返回上一页
    const OnBack = () => proxy.$router.go(-1);

    // 搜索事件
    const OnSearch = () => 
    {
        SearchShow.value = false;
        // 触发刷新效果
        OnRefresh();
    }

    // 分类切换
    const OnTypeToggle = () =>
    {
        GetTypeName();

        OnRefresh();
    }

    // 属性切换
    const OnFlagToggle = () =>
    {
        OnRefresh();
    }

    // 排序切换
    const OnSortToggle = () =>
    {
        OnRefresh();
    }

    // 升降序切换
    const OnByToggle = () =>
    {
        OnRefresh();
    }

    // 下拉刷新
    const OnRefresh = () =>
    {
        // 清空查询参数
        page.value = 1;
        list.value = [];
        finished.value = false;
        loading.value = true;
        refreshing.value = true;

        // 可以去掉定时器
        setTimeout(OnLoad,1500);
    }

    // 加载数据方法
    const OnLoad = async () =>
    {
        // 判断是否为加载中的状态
        if(refreshing.value)
        {
            refreshing.value = false;
        }

        // 请求参数
        let params = {
            typeid: TypeActive.value,
            flag: FlagActive.value,
            sort: SortActive.value,
            by: ByActive.value,
            keywords: keywords.value,
            page:page.value
        }

        let result = await proxy.$POST({
            url:'/product/index',
            params
        })

        // 请求发送完毕后，加载状态也就完毕了
        loading.value = false;

        if(result.code === 1)
        {
            let count = result.data ? result.data.count : 0;
            list.value = result.data ? list.value.concat(result.data.list) : [];

            if(list.value.length >= count)
            {
                finished.value = true;

                return false;
            }

            page.value = page.value + 1;

        }else
        {
            // 如果没有更多数据了 就说明已经加载到底了....
            finished.value = true;

            proxy.$fail(result.msg);
        }
    }

    const GetTypeData = async () =>
    {
        let result = await proxy.$POST({
            url:'/product/type'
        })

        if(result.code === 1)
        {
            result.data.map(item =>
            {
                TypeList.push({text: item.name, value: item.id.toString()})
            })

            GetTypeName();
        }
    }

    // 根据typeid显示相应的分类名称
    const GetTypeName = () =>
    {
        // 循环获取选中的分类名称
        TypeList.map(item =>
        {
            if(TypeActive.value == item.value)
            {
                TypeName.value = item.text;
            }
        })
    }
</script>

<style scoped>
    @import url('/assets/css/ProductIndex.css');
</style>